import React, { useState, useEffect } from "react";
import { Space, Table, Tag, Button } from "antd";
import "./less/listTable.less";
import { ArticleListApi } from "../request/api";
import moment from 'moment'
function MyTitle(props){
  return(
    <div>

           <a className="table_title" 
           href={"http://codesohigh.com:8765/article/"+props.id} 
           target="_blank"
           >
           {props.title}</a>
            <p style={{color:'#999'}}>{props.subTitle}</p>
         
          </div>
  )
}
export default function ListTable() {
 
  const [arr, setArr] = useState([]);
  // 分页
  const [pagination,setPagenation]=useState({current:1,pageSize:10,total:0})

  // 提取请求代码
    const getArticleList =(current,pageSize)=>{
      ArticleListApi({
        num:current,
        count:pageSize
      }).then((res) => {
        console.log(res);
        let myarr=[]
        if (res.errCode === 0) {
          // 更改pagination
          let {num,count,total}=res.data
          setPagenation({
            current:num,
            pageSize:count,
            total
            
          })
          let newArr = JSON.parse(JSON.stringify(res.data.arr));
          newArr.map((item) => {
            let obj={
              key:item.id,
              date:moment(item.date).format("YYYY-MM-DD hh:mm:ss"),
              mytitle:<MyTitle id={item.id} title={item.title} subTitle={item.subTitle} />
            }
            myarr.push(obj)
          });
          console.log(myarr);
          setArr(myarr)
        }
      });
    }
    //分页函数
    useEffect(() => {
      getArticleList(pagination.current,pagination.pageSize);
    }, []);
  
    const  pageChange=(arg)=>{
      console.log(arg);
      getArticleList(arg.current,arg.pageSize);

    }

  const columns = [
    {
      dataIndex: "mytitle",
      key: "mytitle",
      width: "60%",
      render:text=><div>{text}</div>
    },
    {

      dataIndex: "date",
      key: "date",
      render: (text) => <p>{text}</p>,
    },
    {
      title: "Action",
      key: "action",
      render: text => {
        // console.log (text)
        return (
          <Space size="middle">
          <Button type="primary" onClick={()=>{console.log(text.key)}}>编辑</Button>
          <Button type="danger" onClick={()=>{console.log(text.key)}}>删除</Button>
        </Space>
        )
      }
        
    },
  ];
  return(
    <div>
    <Table showHeader={false}
     columns={columns}
   onChange={pageChange} 
   dataSource={arr} 
   pagination={pagination}/>;
 </div>
  )
 
  
}
